var pois = [];
var markersArray = [];
var infoWindow;

// Load map in mainpage
function initializeMap() {
	infoWindow = new google.maps.InfoWindow();
	var center = new google.maps.LatLng(16.0713, 108.220304);
	var mapTypeIds = [];
	for ( var type in google.maps.MapTypeId) {
		mapTypeIds.push(google.maps.MapTypeId[type]);
	}
	var myOptions = {
		zoom : 13,
		center : center,
		mapTypeId : google.maps.MapTypeId.ROADMAP,
		scaleControl : true,
		mapTypeControlOptions : {
			mapTypeIds : mapTypeIds
		}
	};
	map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
	geocoder = new google.maps.Geocoder();
	mapDiv = $('#map-canvas');
	contextMenu = $('#context-menu').appendTo(mapDiv);
	overlay = new google.maps.OverlayView();
	overlay.draw = function() {
	};
	overlay.setMap(map);
	// Hide context menu on several map events
	google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
		$("#map-canvas .gmnoprint:last").prev().css('margin-left', '35%');
	});
	google.maps.event.addListener(map, 'rightclick', function(e) {
		currentLatLng = e.latLng;
	});

	// Hide context menu on several map events
	$.each('click dragstart zoom_changed maptypeid_changed center_changed'
			.split(' '), function(i, name) {
		google.maps.event.addListener(map, name, function() {
			$('#rightclickMarker').fadeOut(200);
		});
	});
}
function initMarker() {
	var image = new google.maps.MarkerImage('http://nguyenlx.somee.com/marker.png',
		      // This marker is 24 pixels wide by 38 pixels tall.
		      new google.maps.Size(24, 38),
		      // The origin for this image is 0,0.
		      new google.maps.Point(0,0),
		      // The anchor for this image is the base of the flagpole at 0,32.
		      new google.maps.Point(0, 38));

	
	for ( var i = 0; i < pois.length; i++) {
		var position = new google.maps.LatLng(pois[i].lat, pois[i].lng);
		var marker = new google.maps.Marker({
			position : position,
			address : pois[i].address,
			price : pois[i].price,
			id : pois[i].id,
			imgpath : pois[i].imgpath,
			icon: image

		});
		initMarkerEvent(marker, i);
		markersArray.push(marker);
	}
	displayMarkers();
}

function displayMarkers() {
	var bounds = new google.maps.LatLngBounds();
	if (markersArray && markersArray.length > 0) {
		for ( var i = 0; i < markersArray.length; i++) {
			markersArray[i].setMap(map);
		}
	}
}
function initMarkerEvent(marker, i) {
	google.maps.event.addListener(marker, 'rightclick', function(event) {
		currentLatLng = event.latLng;
		currentMarker = this;
		showContextMenu(currentLatLng, i);
	});

	google.maps.event.addListener(marker, 'click', function(event) {
		/* if (this.getIcon() != dimIcon) { */
		// var content = '<div id="same-place-panels" style="height: 100px;
		// overflow: auto; margin-top:5px;"> City : '+ marker.title + ' </div>
		// ';
		// infoWindow.open(map, marker);
		// infoWindow.setContent(content);
		// alert(marker.id);
		//$(".superContainer").show();
		//$("#backgroundPopup").show();
		showDetailPlace(marker.id);
		
	});

	google.maps.event
			.addListener(
					marker,
					'mouseover',
					function(event) {
						$("#" + marker.id).css('color', '#DD8C01');
						$("#" + marker.id).css('background-color', '#F3F0F0');
						$("#" + marker.id).css('border', '2px solid gray');	
						
						var img = '<img src="' + marker.imgpath + '" width=100px height=100px />'
						
						var content = '<div id="same-place-panels" style="height: 110px; width: 250px; overflow: auto; margin-top:5px;">'
								+ '<div style="padding-left: 5px; float: left; width: 100px; height: 100px; z-index: 0">'
								+ img
								+ '</div>'
								+ '<div style="margin-left: 110px;">'
								+ marker.address + '<br>'
								+ marker.price + '<br>'
								+ '</div>'
								+ '</div>';
						///infoWindow.open(map, marker);
						///infoWindow.setContent(content);
						
						//alert(event.latLng)
						
						
						var containerPixel = overlay.getProjection().fromLatLngToContainerPixel(event.latLng);
						var mapWidth = $('#map-canvas').width();
						var mapHeight = $('#map-canvas').height();
						var infoWidth = $('#info').width();
						var infoHeight = $('#info').height();
						var x = containerPixel.x;
						var y = containerPixel.y;
						
						var xmove=0;
						var ymove=0;
						
						if ((mapWidth - x) < infoWidth){
							x = x - infoWidth;
							xmove-=20
						}else{
							xmove+=20
						}
							
						if ((mapHeight - y) < infoHeight){
							y = y - infoHeight;
							//ymove-=20;
						}else{
							//y = y + infoHeight;
							//ymove+=20;
							//ymove+=infoHeight;
						}
						
						$('#info').html(content)
						$('#info').css({left : x+xmove,top : y+ymove});
						$('#info').show();	
					});

	google.maps.event.addListener(marker, 'mouseout', function() {
		//infoWindow.close();
		$('#info').hide()
		$("#" + marker.id).css('color', ' #808080');
		$("#" + marker.id).css('background-color', '#fff');
		$("#" + marker.id).css('border', '1px solid gray');	
		
		//$("#" + marker.id).css('background-color', 'white')
		//$("#" + marker.id).css('border', '1px solid gray');
		
		
		/* if (this.getIcon() != dimIcon) { */
		// this.setZIndex(null);
		/* } */
		//
	});

	
	
	google.maps.event.addListener(marker, 'dblclick', function(event) {

	});

	google.maps.event.addListener(map, "click", function(event) {
		/*
		 * hgjhjjj var lat = event.latLng.lat(); var lng = event.latLng.lng(); //
		 * ========================================================
		 * $('#name').val("Nhập tên địa điểm"); setStreetByLatLng(lat, lng);
		 * $('#lat').val(lat); $('#lng').val(lng); displayAddPoiPopUp();
		 * //alert("clicked")
		 */
	});
}
// load map phu
function loadSubMap() {
	/*
	var center = new google.maps.LatLng(16.051571, 108.214897);

	var mapTypeIds = [];

	for ( var type in google.maps.MapTypeId) {
		mapTypeIds.push(google.maps.MapTypeId[type]);
	}

	var myOptions = {
		zoom : 8,
		center : center,
		mapTypeId : google.maps.MapTypeId.ROADMAP,
		scaleControl : true,
		mapTypeControlOptions : {
			mapTypeIds : mapTypeIds
		}
	};

	map = new google.maps.Map(document.getElementById('map'), myOptions);
	geocoder = new google.maps.Geocoder();

	mapDiv = $('#map');
	contextMenu = $('#context-menu').appendTo(mapDiv);
	overlay = new google.maps.OverlayView();
	overlay.draw = function() {
	};
	overlay.setMap(map);
	*/
}
// Event handle in list place while hovering
function onMouseIn(elem) {
	elem.style.border = "2px solid gray";
	elem.style.background = "#F3F0F0";
	for ( var i = 0; i < markersArray.length; i++) {
		if (markersArray[i].id == (elem.id)) {
			markersArray[i].setAnimation(google.maps.Animation.BOUNCE);
		}
	}
}
function onMouseOut(elem) {
	elem.style.border = "1px solid gray";
	elem.style.background = "white";
	for ( var i = 0; i < markersArray.length; i++) {
		if (markersArray[i].getAnimation() != null) {
			markersArray[i].setAnimation(null);
		}
	}
}


//$(document).ready(function() {
//infoWindow = new google.maps.InfoWindow();

// initializeMap();
// initMarker();
/*
 * $("#map-canvas.gmnoprint:last").prev().css('margin-left', '320px');
 * $("#map-canvas.gmnoprint:last").prev().css('margin-top', '150px');
 */

/*
 * $("#pic").click(function() { if ($("#List").is(':visible')) {
 * $("#List").animate({ width : 'hide' }); $("#pic").attr('src',
 * 'images/right.png'); $("#map-canvas
 * .gmnoprint:last").prev().css('margin-left', '5px'); } else {
 * $("#List").animate({ width : 'show' }); $("#pic").attr('src',
 * 'images/left.png'); $("#map-canvas
 * .gmnoprint:last").prev().css('margin-left', '320px'); $("#map-canvas
 * .gmnoprint:last").prev().css('margin-top', '150px'); } });
 */

// open dialog and all tabs
//});
